CODEWITHSUNDEEP
twitter-bootstrap
no0ne
no0ne

Reputation: 2679

Collapse span into two columns

UPDATED
I have tow columns with TwitterBootstrap span7 and span5 like this:

<div class="row">
<div class="span7">Column 1</div>
<div class="span5">Column 2</div>
</div>

In span5 I have content in a definition list <dl> on tablet and mobile screens (767px and below) collapses into this:

|     span7     |   
|     span5     |

this makes the collapsed span5 extremely tall and thin, therefore I would need to split the information in span5 into two columns like this:

|     span7     |   
| span5 | span5 |

Any suggestion how to do this without any major hassle?

Upvotes: 0

Views: 162

Answers (1)

Orab&#238;g
Orab&#238;g

Reputation: 12012

Well, I think you have to admit that only you can specify how you want your "span5" content to be split. It can't be guessed by the browser. (maybe you'll want every other line, or split in in the middle...)

So, let's assume your original content is :

<div class="row">
  <div class="span7">Span 7</div>
  <div class="span5">
    <div>Span 5-1</div>
    <div>Span 5-2</div>
  </div>
</div>

Which makes

|       span7       |   
| span5-1 | span5-2 |

This post should be helpful : Twitter Bootstrap: how to not scale columns to single row under 767px

Unfortunately, I didn't manage to do better than be forced to write your content twice :

<div class="row-fluid">
  <div class="span7">Span 7</div>
  <div class="span5 hidden-phone">
    <div>Span 5-1</div>
    <div>Span 5-2</div>
  </div>
    <div class="mobile-one visible-phone">Span 5-1</div>
    <div class="mobile-two visible-phone">Span 5-2</div>
</div>

(you can test it at http://bootply.com/86089)

I'll post another solution if I manage to find something better...

Upvotes: 1

Related Questions