Position of blocks in Bootstrap

Question

Hello, I’m trying to make a template in bootstrap (due to its responsiveness) but I’m stuck in a situation that I can’t find output without using javascript (which would be bad in my case).

I need the template to stay on big screens like the following Fiddle: http://jsfiddle.net/hsCw9/1/

And on small screens like: http://jsfiddle.net/hsCw9/2/

In case it was not clear, on small and super small screens, the blocks "P1" and "P2" have to leave the right side to afterward news as the first block has to come before news; Already on the medium screens up, the blocks "P1", "P2" and "Stuff" should come to the right side of the news.

I couldn’t find any solution without javascript. Any idea?

PS:: Don’t forget to resize the views in the fiddle so it stays the right way

Answer 1

Hello,

From what I understand I think I got what you want:

First I took the classes col-push and col-pull that you had placed, I traded for the original bootstrap classes pull-left and pull-right.

As I created a container for <p>, and put the same classes of "Stuff".

See the code:

<div class="col-xs-12 col-md-4 pull-right">
    <div class="teemo-block">
        p1
    </div>
</div>
<div class="col-xs-12 col-md-4 pull-right">
    <div class="teemo-block">
        p2
    </div>
</div>

By default all "cols" in the bootstrap have float left, so if you want different you have to force this.

So the news put pull-left the rest put pull-right, all within the same row.

The result is this:

http://jsfiddle.net/luckmattos/hsCw9/6/

I helped?

Answer 2

You can use the grid options to position the elements in the desired manner, depending on the device in which they are displayed.

In the example below, you will have only one column on small and minimal devices, and two columns on medium and large devices:

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">notícia</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">p1 p2 stuff</div>

Another alternative is to use utility classes to display or hide the elements depending on the device on which they are displayed, but this could incur repetition of content.