CODEWITHSUNDEEP
csstwitter-bootstrap-3responsive
mattjvincent
mattjvincent

Reputation: 888

Bootstrap Layout Confusion

I know Bootstrap is design mobile first. I wonder if the possible layout is possible with just Bootstrap's CSS classes?

layout

Figure A on size col-md or larger

And when screen is col-sm or col-xs, go to B or C. (2 different solutions).

I'm looking for the correct div layouts for A->B and A->C.

The heights for each section are random because the content generated in them will be dynamic. I added heights in the divs just for filler, but they will be dynamic and can't be set.

The following DOES NOT work...

Fiddle ... https://jsfiddle.net/s4jj30wf/

<div class="row">
    <div style="background:blue" class="col-xs-12 col-md-4">
        <div style="height:100px"></div>
    </div>
    <div style="background:yellow" class="col-md-8 col-xs-12">
        <div class="row">
            <div style="background:green" class="col-md-12 col-xs-12">
                <div style="height:20px"></div>
            </div>
            <div style="background:pink" class="col-md-12 col-xs-12">
                <div style="height:100px"></div>
            </div>
            <div style="background:red" class="col-md-12 col-xs-12">
                <div style="height:100px"></div>
            </div>
        </div>
    </div>
    <div style="background:orange" class="col-md-4 col-md-pull-4 col-xs-12">
        <div style="height:50px"></div>
    </div>
</div>

Upvotes: 0

Views: 101

Answers (3)

Nasir T
Nasir T

Reputation: 2643

Solution: There are 2 ways based on if the columns have static height or dynamic height. If they have static height then we have a pure css solution using the float and clear property as well as margin-top property to achieve this.

Sample pure css with fixed height of columns:

http://codepen.io/Nasir_T/pen/ZBOgoe

If the height is not fixed and dynamic then we will need use of jquery to adjust the margin-top property in order to dynamically kill the gap between the mis-aligned 2 elements based on A->B and A->C scenario. We will be using the default jquery and modernizr js for this simple solution.

Sample jQuery & css solution with dynamic column height:

http://codepen.io/Nasir_T/pen/VmjoPd

Hope this helps.

Upvotes: 1

Ales Trunda
Ales Trunda

Reputation: 189

In document there is some flow of elements, you can't just mix them as you like unless you position them absolutely.

Using only bootstrap classes, I think the only way how to do that is to duplicate the content - you will have all A, B and C in the page and based on screen size display the one you want - using classes visible-xs, hidden-sm etc. But duplicating content is usually not wise idea.

Upvotes: 0

James
James

Reputation: 323

I think what you maybe looking for is column ordering where you can .push-md- and .pull-md-

Upvotes: 1

Related Questions