CODEWITHSUNDEEP
htmlcss
Damien Chaib
Damien Chaib

Reputation: 401

Reorganize divs in responsive layout

I have a responsive layout that is supposed to look like this on small screens:

|A1             A2|
|B1             B2|

and like this on wider screens:

|        A1 A2 B2 B1        |

The A2 and B2 cells have a fixed but unknown width. On small screens, texts in A1 and B1 cells are aligned to the left, but on wider screens, A1's text is aligned to the right.

I use Bootstrap to manage A and B rows, but I cannot use it for A2 and B2 cells as I don't want them to change size. I cannot use hard-coded margins, as I don't know the width of these cells.

Here is what I have so far (available as a fiddle):

HTML:

<div class="row">
    <div class="col-sm-6 left">
        <div class="big-cell">A1</div>
        <div class="small-cell">A2</div>
    </div>
    <div class="col-sm-6 right">
        <div class="big-cell">B1</div>
        <div class="small-cell">B2</div>
    </div>
</div>

CSS:

.small-cell {
    background-color: #ddffff;
    display: inline-block;
    text-align: center;
    width: 100px; /* Value used as an example */
}
.left .small-cell {
    float: right;
}
.right .small-cell {
    float: right;
}
.big-cell {
    background-color: #ddddff;
    display: inline-block;
}
@media screen and (min-width: 768px) {
    .small-cell {
        display:block;
    }
    .right .small-cell {
        float: left;
    }
}

It looks almost OK, except I can't make the A1 cell to align right, next to A2, on wider screens.

Upvotes: 0

Views: 169

Answers (2)

Erik Svedin
Erik Svedin

Reputation: 1286

One way of approaching this is to restructure the html markup and placing the a2 div before a1

<div class="small-cell ">A2</div>
<div class="big-cell">A1</div>

Then add a float:right; when above 768px to the a1 div.

jsfiddle: http://jsfiddle.net/vLnzj9ue/2/

Upvotes: 3

Michal Stassel
Michal Stassel

Reputation: 68

If you are okay with aligning text to right, it should help just to align whole left column to the right.

.col-sm-6.left {
    text-align: right;
}

Upvotes: 2

Related Questions