Fabio Pereira Fabio Pereira - 4 months ago 9
CSS Question

Label and input wrapping at different widths

I have, in one row, three columns, the first two with text (titles), and the last one with a label/select input stacked one on top of the other. What I want to do is to make columns wrap at different widths - specifically, the label/select at

md
, and the text-only ones at
sm
. Seems simple, but I can't make the label and the select wrap at the same time. The select breaks at
md
as expected, but the label wraps only at
sm
width, together with the titles.

<div class="row">
<div class="col-sm-4">
<h2>Large title</h2>
</div>
<div class="col-sm-5">
<h3>Smaller, longer title</h3>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="sel">Select an option</label>
<select id="sel" name="sel" class="form-control">
<option>First option with long text</option>
<option>Second option with long text</option>
</select>
</div>
</div>
</div>


https://jsfiddle.net/uft4vaoc/

Am I doing anything stupid here?

Answer

I think this is what you want, see fiddle https://jsfiddle.net/uft4vaoc/1/

just add col-xs-12 to the div you want to wrap together like this:

<div class="col-md-3 col-xs-12">

And to give it a nicer flow, you could add some extra classes like this example https://jsfiddle.net/uft4vaoc/3/

<div class="col-md-3 col-xs-12">
  <div class="row">
    <div class="form-group col-md-12 col-sm-6  col-xs-8">
      <label for="sel">Select an option</label>
      <select id="sel" name="sel" class="form-control">
        <option>First option with long text</option>
        <option>Second option with long text</option>
      </select>
    </div>
  </div>
</div>