title: angular flex layout responsive form
body: <p>we're using this lib : <a href="https://github.com/angular/flex-layout" rel="nofollow noreferrer">https://github.com/angular/flex-layout</a></p>
  <p>so far, we have below code to achive the fxlayout, but it did not work in mobile device.</p>
  <pre><code>&lt;div fxLayout=&quot;column&quot; id=&quot;width&quot;&gt;
       &lt;div class=&quot;table-cell&quot; fxLayout=&quot;row&quot;&gt;
              &lt;div fxLayout=&quot;column&quot; class=&quot;columnlabel&quot;&gt;
                &lt;label class=&quot;f_label margintop&quot;&gt;width &lt;/label&gt;
              &lt;/div&gt;
              &lt;div fxLayout=&quot;column leftpadding&quot;&gt;
                &lt;input type=&quot;number&quot; matInput 
                   style=&quot;font-weight: bold;background: white;margin-top: 2px;&quot; name=&quot;width&quot;&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>what i am looking for is,</p>
  <p>when it is mobile device want input control as underneath to label</p>
  <p>when it is large device want textbox on right side</p>
  <p>but in some case want input control on right side in mobile also, for example, tongle switch control.</p>
  <p>please click on below link for sample representation, and can you please guide me what i am missing ?
  <a href="https://i.stack.imgur.com/m66js.png" rel="nofollow noreferrer">sample</a></p>
  <p>provided sample work on stack blitz as requested in comment. Thanks</p>
  <p><a href="https://flex-layout-angular-material-wqeqvc.stackblitz.io/" rel="nofollow noreferrer">https://flex-layout-angular-material-wqeqvc.stackblitz.io/</a></p>
  <p><a href="https://stackblitz.com/edit/flex-layout-angular-material-wqeqvc?file=app/app.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/flex-layout-angular-material-wqeqvc?file=app/app.component.html</a></p>