Reputation: 13
I am trying to achieve the following layouts on in bootstrap but I cant seem to get things laid out correctly in mobile and desktop.
Example of my "mobile" can be seen here : http://www.bootply.com/I7N9hf54yv
As it is the website looks good on a few phones and tablets and completely unusable on others.
I have also tried something similar to: http://www.bootply.com/rY6JSRZX5f
For the desktop look I want :
_________________________
|question| p |question|
| | i | |
| | c | |
|question| t |question|
| | u | |
| | r | |
|question| e |question|
|________|______|________|
and mobile:
___________________________
| question |
| |
| question |
| |
| question |
| |
| p |
| i |
| c |
| |
| question |
| |
| question |
| |
| question |
|__________________________|
Upvotes: 0
Views: 2418
Reputation: 416
You are looking for something like this:
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
questions
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
picture
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
questions
</div>
</div>
Upvotes: 2
Reputation: 8206
perhaps something like this? http://jsfiddle.net/swm53ran/18/
<div class="col-md-12 text-center">
<div class="row">
<div class="col-md-4 col-sm-12" style="color:blue;">
<div class="row"><div class="col-md-12">Question</div></div>
<div class="row"><div class="col-md-12">Question</div></div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row"><div class="col-md-12">Picture</div></div>
<div class="row"><div class="col-md-12">Picture</div></div>
<div class="row"><div class="col-md-12">Picture</div></div>
</div>
<div class="col-md-4 col-sm-12" style="color:red;">
<div class="row"><div class="col-md-12">Question</div></div>
<div class="row"><div class="col-md-12">Question</div></div>
<div class="row"><div class="col-md-12">Question</div></div>
</div>
</div>
</div>
At first glance, it seems as like there may be a lot of nested divs, but it's coded that way with the intent of keeping each question and picture in its own individual space in which you can apply styles/functionality to all like "containers" to keep the code as clean as possible and as maintainable as possible
Upvotes: 0