CODEWITHSUNDEEP
csstwitter-bootstrapcss-float
Urs
Urs

Reputation: 5122

Float right-to-left in bootstrap 3?

I use bootstrap's 3.x grid as a base for my layouts. With the regular bootstrap containers, elements will be positioned using left floats.

As with each float-driven layout, you can run into the situation where you are not happy with the way you have to position the elements in the markup to achieve the desired grid layout -- be it for accessibility reasons, for a linearized layout on small screens, or simply for semantic's sake.

It's the classic issue that with float-left, you have to write

a
b

in the markup to achieve

a b

in the grid layout. Which makes perfect sense - most of the time. But not always.

So I was wondering if this could (simply?) be solved by introducing rows inside the bootstrap grid, where floating goes the other way round. So there would be some rows where colums float left, other rows where columns float right. Has this been done?

PS: I am not looking for solutions outside the float paradigma, absolute positions or top pixel offsets.

Upvotes: 0

Views: 6340

Answers (3)

Urs
Urs

Reputation: 5122

I've added a row class row-rtl:

<div class="row row-rtl">
  <div class="col-md-6">
  b
  </div>
  <div class="col-md-6">
  a
  </div>
</div>

@media (min-width: @screen-md-min) {
    .row-rtl {
        .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
            float: right;
        }
    }
}

which displays as 

a b

in the grid layout.

Upvotes: 3

Kisspa
Kisspa

Reputation: 584

   //test code and resize you window
  .col-md-6{
        border:1px solid gold;
    }

@media  screen and (min-width: 321px) and (max-width:960px){
    .row .col-md-6:first-child{
        position:relative;
        top:44px;
    }
    .row .col-md-6:last-child{
        float:left;
        width:100%;
    }
}

Upvotes: 0

symlink
symlink

Reputation: 12209

Probably the easiest way is to absolutely position the rows. Bring the upper row 20px down (the height of a bootstrap row). Here's the CSS:

.row {
    position:relative;
}

.top {
    position:absolute;
    top:20px;
}

.bottom {
    position:absolute;
}

.row is given a relative position which confines the absolute positioning to inside its borders.

Here's the jsFiddle

Upvotes: 0

Related Questions