Position of blocks in Bootstrap

Asked

Viewed 9,582 times

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’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

  • You want the first block of the right-column to be before the first block of the left-column when on lower resolution devices?

  • Yes, the first block on the left should be before and the second block after on small resolution devices.

2 answers

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?

  • To make it easier to understand I left the class "col-Xs-12", but as our friend Henrique said the bootstrap does it by default.

  • Exactly what I needed! Thank you very much! :)

  • I answered and translated your answer into the OS question in English. http://stackoverflow.com/questions/22467595/columns-position-on-bootstrap/22489678#22489678

  • Nice, pity that does not accumulate point, hehe, vlw!

0

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.

  • 2

    Unnecessary to declare col-xs-12 and col-sm-12, because the default behavior of bootstrap will be to stack the content if there is nothing declared.

  • I think there was no correct understanding of the problem in this case, because the problem is the variation of the position of the blocks in the template, one hour the "P1 P2" should be after the news block and another time before the block.

  • I answered there, take a look!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.