How to display the right div first on the mobile device - html

Question

I have 2 columns, Left and Right with 50% width. There is no issue on the desktop. In the mobile device, I have to display the right side div first and then display left side div.
Note: I am not using bootstrap.
.full_100 {
width: 100%;
display: flex;
}
.left_50,
.right_50 {
width: 50%;
}
#media all and (max-width: 400px) {
.full_100 {
display: block;
}
.left_50,
.right_50 {
width: 100%;
}
}
<div class="full_100">
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="right_50">
<h2>This is the right div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

Answer 1

Since you are using Flexbox, you can do it with the order property:
.full_100 {width:100%;display:flex}
.left_50, .right_50 {width:50%}
#media all and (max-width: 400px) {
.full_100 {
/*display: block;*/
flex-wrap: wrap; /* enables wrapping */
}
.left_50, .right_50 {
/*width: 100%;*/
flex-basis: 100%;
}
.left_50 {
order: 1; /* .right_50 stays at 0 (default value), i.e. comes before the left one */
}
}
<div class="full_100">
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="right_50">
<h2>This is the right div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Or with the positioning:
.full_100 {width:100%;display:flex}
.left_50, .right_50 {width:50%}
#media all and (max-width: 400px) {
.full_100 {
display: block;
position: relative; /* needs to be set because its the parent element */
}
.left_50, .right_50 {
width: 100%; /* needs to be set */
position: absolute; /* positioned relative to its parent */
left: 0; /* recommended */
}
.left_50 {
top: 50vh; /* moved down by 50% of the viewport height */
}
.right_50 {
top: 0; /* moved to top */
}
}
<div class="full_100">
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="right_50">
<h2>This is the right div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

Answer 2

Using Flexbox
.full_100 {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.left_50,
.right_50 {
flex-basis: 50%;
}
#media all and (max-width: 500px) {
.left_50 {
order: 2;
flex-basis: 100%;
}
.right_50 {
order: 1;
flex-basis: 100%;
}
}
<div class="full_100">
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="right_50">
<h2>This is the right div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Using GRID Css
.full_100 {
display: grid;
grid-template-columns: 1fr 1fr;
}
#media all and (max-width: 500px) {
.full_100 {
grid-template-columns: auto;
}
.left_50 {
order: 2;
}
.right_50 {
order: 1;
}
}
<div class="full_100">
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="right_50">
<h2>This is the right div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Using Floats:
.left_50,
.right_50 {
float: left;
width: 50%;
}
#media all and (max-width: 500px) {
.left_50,
.right_50 {
float: right;
}
}
<div class="full_100">
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="right_50">
<h2>This is the right div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

Answer 3

If flexbox is an option (https://caniuse.com/#feat=flexbox), then you can use order:.

Answer 4

Retain the flex display property value on the containing parent element (.full_100) and in addition alter the flex direction, by declaring flex-direction: column-reverse.
column direction since the nested elements are required to occupy the full-width of the containing element,
and reverse since these elements are required to switch display
positions.
Example:
#media (max-width : 400px) {
.full_100{
display: flex;
flex-direction: column-reverse;
}
.left_50, .right_50{
width: 100%;
}
}
Alternatively:
Adjust the order of nested flex-box elements.
#media (max-width : 400px) {
.full_100{
display: flex;
}
.left_50, .right_50{
width: 100%;
}
.left_50{
order: 2;
}
.right_50{
order: 1;
}
}

Answer 5

An answer that also works without flexbox as requested in one of your comments: If you reverse the order in the HTML code, you can use float: right, which will give you the result you are asking for:
I removed the flex properties to demonstrate the floating solution, but you can add display: flex; and flex-direction: row-reverse;´ to.full_100`, which will give you the same result using flex, and you can use both together as a fallback for older browsers.
.full_100 {
width: 100%;
}
.left_50,
.right_50 {
width: 50%;
float: right;
}
#media all and (max-width: 400px) {
.full_100 {
display: block;
}
.left_50,
.right_50 {
width: 100%;
}
}
<div class="full_100">
<div class="right_50">
<h2>This is the right div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>