CSS layout-align div cross layout with bottom-flex implementation and css-flex

CSS layout-align div cross layout with bottom-flex implementation and css-flex

Recently, when I was writing a page with wordpress, the designer gave a webpage Layout pattern, which was never met before. Its computer (resolution greater than 768px) is as follows:

The mobile phone (resolution less than or equal to 768px) requires the following arrangement:

I thought of two methods.

The first method is to use bootstrap's row and col-md in combination with col-md-push and col-md-pull.The Code is as follows:

1 <! DOCTYPE html> 2 
Computer effect:

Effects on mobile phones:
1 <! DOCTYPE html> 2 
The results on the computer are as follows:
. R: nth-child (even) {flex-direction: row-reverse;}, and then arrange it on your phone. R {display: block; width: 100% ;}.
 
I also found that using flex can easily achieve the bottom alignment of the two divs. The Code is as follows:
. C {display: flex; align-items: flex-end ;}. A {background: rgba (255, 0, 0, 0.1 );}. a: nth-child (odd) {background: # 1a88ea; color: white; font-size: 30px; padding: 10px 15px ;} </style> <div class = "C"> <div class = "A"> innovation </div> <div class = "A"> lab base </div> </div>
In fact, it is to make the div in C, with the Spindle as x (when arranged by row, the spindle is x, and if flex-diretion is not specified, the default is to arrange by row ), the layout direction is row, and then make the div all at the bottom of the Y axis (cross axis) align-items: flex-end;
The effect is as follows:
<Style media = "screen">. C {position: relative ;}. A {display: inline-block; background: rgba (255, 0, 0, 0.1 );}. a: nth-child (odd) {background: # 1a88ea; color: white; font-size: 30px; padding: 10px 15px ;}. a: nth-child (even) {bottom: 0; position: absolute ;} </style> <div class = "C"> <div class = "A"> innovation </div> <div class = "A"> lab base </div> </div>
But obviously, using flex is easier to implement.
 
Ps: When I wrote this blog, chrome crashed five times. I don't know whether it was the reason for the input method or chrome's own reasons. I automatically quit when I entered the correct character.