Reputation: 401
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
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
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