Check out my code snippet below:
.wrapper {
border: 1px solid red;
padding-left: 20px;
}
.table {
display: table;
width: 100%;
}
.table > div {
display: table-cell;
border: 1px solid green;
min-width: 190px;
}
@media screen and (max-width: 600px) {
.table > div {
float:left;
}
.author, .editor{
clear: both;
}
}<div class="wrapper">
<div class="table">
<div class="share_edit_flag">
<span>share</span>
<span>edit</span>
<span>close</span>
</div>
<div class="editor">
<a href="#">edited May 21 16 at 11:58</a>
<div class="profile">
<img src="#" />
<a href="#">Rory O'Kane</a>
<b>12.6k</b>
<!-- I don't have any badge in my website -->
</div>
</div>
<div class="author">
<a href="#">asked May 21 16 at 11:51</a>
<div class="profile">
<img src="#" />
<a href="#">vasanthkumarmani</a>
<b>1</b>
<!-- I don't have any badge in my website -->
</div>
</div>
</div>
</div>Try resizing the screen after running the above snippet as full size. Notice how the author and editor boxes drop down under each other when the screen is reduced. Now, I want to change the order so that the author box appears above the editor box instead. Can you help me achieve this rearrangement?
Please note: I would like to maintain the current order when the screen is full-size (with the author box appearing on the rightmost side).