CSS - Bootstrap : below 767px viewports 2 spans (or more) per rows instead of 1

Question

there is a default method with Bootstrap or how I can edit to do that below 767px (mobile) each spans within a row don't becomes 100%? I just want they go to 50% ... to have for example 2 spans side by side instead of one below the other.

thanks in advance

Answer 1

I know this question is old but I came across it while looking for a solution to this same problem, then I figured it out myself. I thought I should post my solution in case anyone else finds this page.

My problem was that I had a responsive Bootstrap page with four columns (four span3 list items) and another page with three columns (three span4 list items). I wanted both of them to turn into two columns when under 767px. My structure is like this for the four-column page, with row-fluid repeated several times inside span12:

<div class="span12">
    <div class="row-fluid">
        <ul class="thumbnails">
            <li class="span3"></li>
            <li class="span3"></li>
            <li class="span3"></li>
            <li class="span3"></li>
        </ul>
    </div>
  </div>

And my structure is like this for the three-column page, again with row-fluid repeated several times inside span12:

<div class="span12">
    <div class="row-fluid">
        <ul class="thumbnails">
            <li class="span4"></li>
            <li class="span4"></li>
            <li class="span4"></li>
        </ul>
    </div>
</div>

That structure is taken from the Bootstrap section about thumbnails. Here is the CSS I added to make both of them turn into two columns below 767px:

@media screen and (max-width: 767px) {
/* remove clear from each ul to stop them from breaking into rows */
ul.thumbnails::after {
    clear: none;
}

/* make the width of each span equal to 47% instead of 100%.
You could make it closer to 50% if you have no borders or padding etc. */
ul.thumbnails li[class*="span"]{
    width: 47%; 
    float: left;
}
    // select the second span in each row (ul) on the 3 column page
[class*="span"] .span4:nth-child(2),
    // select the first span in the even rows on the 3 column page
[class*="span"] .row-fluid:nth-child(even) .span4:nth-child(1),
    // select the even spans in each row on the 4 column page
[class*="span"] .span3:nth-child(even)
{
    float: right; //float them all to the right
}
}

You will have to adjust these selectors if you're not using the same structure. They aren't the most elegant selectors either so if you're able to write them better, please do. As soon as I got them working I couldn't be bothered to play with them anymore. I hope this helps someone!

[edit] I just noticed that I actually use fluid-row in all my code, not row-fluid... so you may need to change it to that. fluid-row doesn't have any rules in my stylesheet though.

Link to fiddle with correct selectors in CSS: http://jsfiddle.net/rUCgS/4/

Answer 2

I simply modified the behavior of .row-fluid [class*="span"] inside @media (max-width: 767px) { ... } and changed it back when I hit max-width: 480px. I also added a class .span-control to the 2 first spans of a row to make sure they both have their margin-left removed.

Should look like this

The !important tags were useful for jsfiddle, but you won't need them in your stylesheet.