Bootstrap Layout Confusion

Question

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

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>

Answer 1

我认为您可能正在寻找的是列排序 ，可以在其中进行.push-md-和.pull-md-

Answer 2

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.

Answer 3

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.