Position of blocks in Bootstrap

Navigation
4

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

I need the template to stay on large screens like the following Fiddle: link

And on small screens like: link

If it has not been clear, on the small and super small screens, the blocks "p1" and "p2" have to leave the right side for then of the news while the first block has to come < strong> before news; In the middle screens upwards, the blocks "p1", "p2" and "stuff" should come to the right side of the news.

I could not find a solution without being javascript. Any ideas?

PS :: Do not forget to re-size the views in the fiddle so that it stays the correct way

    
asked by anonymous 17.03.2014 / 07:25

2 answers

1

Hello,

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

First I took the col-push and col-pull classes that you had put, I switched to the original bootstrap classes pull-left and pull-right .

Secondly I created a container for <p> , and put the same classes as "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 that.

Then the news I put pull-left the rest put pull-right , everything within the same row .

The result is this:

link

I helped?

    
18.03.2014 / 20:29
0

You can use the grid options to position the elements the way you want, adjusting to the device you want are displayed.

In the example below, you will have only one column in small and small devices, and two columns in 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>

Alternatively, you can use the utility classes to display or hide the elements depending on the device in which they are displayed, but this could incur content repetition.

    
18.03.2014 / 16:41
How to do multiple image uploads with Rails 3? PHP session expires ahead of time