Pumnkin Pie
Pumnkin Pie

Reputation: 13

Bootstrap grid for mobile/desktop

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

Answers (2)

Amundio
Amundio

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

indubitablee
indubitablee

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

Related Questions