To set up two div blocks in a row, I'm utilizing the code below:
<div layout="column" layout-gt-xs="row" layout-align="center center" id="row">
<div id="a">a</div>
<div id="b">b</div>
</div>
The CSS for this arrangement is as follows:
#row div {
width: 80px;
height: 80px;
border: 1px solid black;
margin:10px;
text-align:center;
}
I am looking to make it responsive so that on smaller screens, the layout adjusts to resemble this
How can Angular Material assist me in achieving this? I attempted to use the following approach:
#b {
float: left !important;
}
However, it appears that floating within a layout container does not function properly.
View the live demo here.