title: how to add multiple elements in row bootstrap 4
body: <p>I am new to bootsrtap-4 I am designing one page in HTML using bootstrap-4, But facing some issue while to make it responsive it should work in e.g, Laptop-L,Laptop-M and i-padd, while design it, its working in only for Laptop-L not M size and i-padd, can someone see me code and tell me what should i do to design this page.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div className="row"&gt;
      &lt;div className="col-md-10"&gt;
          &lt;div className="row"&gt;
              &lt;div className="col-md-4"&gt;    
                  &lt;div className="fontStyle"&gt;
                      &lt;span className=""&gt;1&lt;/span&gt;
                      &lt;!-- &lt;div className="displayBlk"&gt; --&gt;
                      &lt;label type="text"&gt;Select Technology&lt;/label&gt;
  
                          &lt;select value=""  className="selectpicker btn btn-labeled btn-start"&gt;
                              &lt;option value=""&gt;None Selected&lt;/option&gt;
                              &lt;option value=""&gt;Hello &lt;/option&gt;
                              &lt;option value=""&gt;World &lt;/option&gt;
                          &lt;/select&gt;
                      &lt;!-- &lt;/div&gt; --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="col-md-4 rowOne"&gt;
                  &lt;div className="fontStyle"&gt;
                      Select Question Type                    
                      &lt;button type="button" class="btn btn-primary btn-sm"&gt;Code Type&lt;/button&gt;
                      &lt;button type="button" class="btn btn-default btn-sm"&gt;Non Code Type&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="col-md-4"&gt;
                  &lt;div className="fontStyle"&gt;
                      Number Of Questions
                      &lt;select value="" onChange="" className="selectpicker btn btn-labeled btn-start"&gt;
                          &lt;option value=""&gt;Select&lt;/option&gt;
                          &lt;option value=""&gt;01&lt;/option&gt;
                          &lt;option value=""&gt;02&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- end of 10 col row --&gt;
      &lt;/div&gt;
      &lt;div className="col-md-2"&gt;
          &lt;span className=""&gt;
              &lt;button type="button" class="btn btn-outline-primary btn-sm"&gt;Reset&lt;/button&gt;
          &lt;/span&gt;
          &lt;span&gt;
              &lt;button type="button" class="btn btn-primary btn-sm"&gt;+&lt;/button&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- end of main row --&gt;
  </code></pre>
  
  <p>First Screen where its showing in L-Size Screen:</p>
  
  <p><a href="https://i.stack.imgur.com/rycDH.png" rel="nofollow noreferrer">first screen output</a></p>
  
  <p>Second screen where its showing in M-size screen:</p>
  
  <p><a href="https://i.stack.imgur.com/O9k67.png" rel="nofollow noreferrer">second screen output</a></p>
  
  <p>What I am looking for actual output:</p>
  
  <p><a href="https://i.stack.imgur.com/zoDkX.png" rel="nofollow noreferrer">actual output</a> </p>
  
  <p>can someone please guide me how can i achieve this design.</p>
  
  <p>Thanks for any help!</p>