We are currently utilizing the following library: https://github.com/angular/flex-layout
Our current code for achieving fxlayout is as follows, however, it is not functioning correctly on mobile devices.
<div fxLayout="column" id="width">
<div class="table-cell" fxLayout="row">
<div class="columnlabel" fxLayout="column">
<label class="f_label margintop">width </label>
</div>
<div class="leftpadding" fxLayout="column">
<input type="number" matInput
style="font-weight: bold;background: white;margin-top: 2px;" name="width">
</div>
</div>
</div>
What we aim to achieve is,
On mobile devices, we want the input control to appear under the label.
On larger devices, we want the textbox to be on the right side.
However, in some cases on mobile, we may need the input control on the right side, for example, with a toggle switch control.
For a visual representation, please visit the following link and kindly guide us on what might be missing: sample
The provided sample works on stack blitz as requested in the comment. Thank you.
https://stackblitz.com/edit/flex-layout-angular-material-wqeqvc?file=app/app.component.html