CODEWITHSUNDEEP
csstwitter-bootstrap
Arikael
Arikael

Reputation: 2095

bootstrap, complex nested columns with rowspan

Hi I'm trying to achieve something like shown in the image below (using Bootstrap 3.3.2)

enter image description here

I sucessfully created the first block (first image in the image so to speak) But is it possible to create the design in way, that it automatically transforms to the second design in the image?

I'm struggling with that (not sure if it is even possible). One important thing to note is, that Ad1 in the first design has to span over the two first rows. Starting row2 below ad1 is unfortunately not an option.

Here is what my first block is made of

<div class="row">
  <div class="col-sm-12 col-lg-8 ">
    <div class="row">
        <div col-sm-4 col-lg-4 ">
            Img1
        </div>
        <div class="news-entry-content col-sm-8 col-lg-8 ">
            Text1
        </div>
    </div>
    <div class="row">
        <div class="news-entry-image col-sm-4 col-lg-4">
            Img2
        </div>
        <div class="news-entry-content col-sm-8 col-lg-8">
            Text2
        </div>
    </div>
</div>
<div class="col-sm-12 col-lg-4" title="First News Werbiung">
    Ad1
</div>

Thanks for your help

EDIT

I added the requested jsfiddle http://jsfiddle.net/v0r5y7q9/

Just play around with the width. You'll notice two problems.

  1. With a big width: The ad is placed below (Img2+Text2), I want it to place below (Img3+Text3)

  2. With a narrow width: (Img3+Text3) is off compared to the other rows. Makes sense, considering how I built the whole thing. One solution to this could be a negative margin. Or is there a better solution?

thanks.

Upvotes: 0

Views: 404

Answers (2)

crealex
crealex

Reputation: 26

that could be a solution: jsfiddle

see jsfiddle link

It's two ad-blocks with visible/hidden, but I've not found a better solution.

p.s. how to put jsfiddle-link directly in the post?

Upvotes: 1

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9032

If the height of your elements on your project are fixed I would use this turnaround to get what you want. Just change your add to absolute position when you want and place it at the bottom of your elements. Like in this fiddle

@media only screen and (max-width : 500px) {

    .ad1 {
     position:absolute;
     /*and bottom:x based on the height of your elements*/

}}

Upvotes: 1

Related Questions