CODEWITHSUNDEEP
htmlcssformstwitter-bootstrap
Nita
Nita

Reputation: 561

Inputs order in the form with Booststrap

I have problem with setting right order of inputs in the form on the mobile view using Bootstrap. I already asked similar question, and got some tips and have been told is easy. I tried many things and i just don't know how to get required result.

Take a look at the jsfiddle please.

https://jsfiddle.net/nitadesign/y79LwL9x/8/

I want input with placeholder (17 - Error Text Area) to be on the top of the (20 - Button).

Visual graph:

enter image description here

And HTML

<div class="row">
    <div class="col-md-3">
        <input name="textinput" type="text" placeholder="1" class="form-control" />
        <input name="textinput" type="text" placeholder="2" class="form-control" />
        <input name="textinput" type="text" placeholder="3" class="form-control" />
        <input name="textinput" type="text" placeholder="4" class="form-control" />
        <input name="textinput" type="text" placeholder="5" class="form-control" />
    </div>

    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6">
                <input name="textinput" type="text" placeholder="6" class="form-control" />
                <input name="textinput" type="text" placeholder="7" class="form-control" />
                <input name="textinput" type="text" placeholder="8" class="form-control" />
                <input name="textinput" type="text" placeholder="9" class="form-control" />
            </div>
            <div class="col-md-6">
                <input name="textinput" type="text" placeholder="10" class="form-control" />
                <input name="textinput" type="text" placeholder="11" class="form-control" />
                <input name="textinput" type="text" placeholder="12" class="form-control" />
                <input name="textinput" type="text" placeholder="13" class="form-control" />
            </div>
        </div>
    </div>


    <div class="col-md-3">
        <input name="textinput" type="text" placeholder="14" class="form-control" />
        <input name="textinput" type="text" placeholder="15" class="form-control" />
        <input name="textinput" type="text" placeholder="16" class="form-control" />
        <input name="textinput" type="text" placeholder="17 - Error Text Area" class="form-control" />
    </div>

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-4">
                <input name="textinput" type="text" placeholder="18" class="form-control" />
            </div>
            <div class="col-md-4">
                <input name="textinput" type="text" placeholder="19" class="form-control" />
            </div>
            <div class="col-md-4">
                <input name="textinput" type="text" placeholder="20 - Button" class="form-control" />
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Views: 307

Answers (1)

zer00ne
zer00ne

Reputation: 43910

...got some tips and have been told is easy.

I'm with you, it wasn't that easy. If it was that easy you would've gotten an answer that works.

SOLUTION

You can use flexbox on inputs 17 to 20 and use the flexbox property order.

  .flex { display: flex; flex-direction: column; }
  .flex1 { order:3; }
  .flex2 { order:1; }
  .flex3 { order:2; }
  .flex4 { order:4; }
  @media screen and (min-width:1000px) {
    .flex { display: inline; }
  }

These rulesets basically are saying:

The 4 designated flex items (children of a flex container, i.e. .flex1, .flex2, .flex3, .flex4) will be reordered as:

  • 3rd is now 1st,
  • 1st is now 2nd,
  • and 2nd is now 3rd

When the viewport is wider than 1000px, the flex container (i.e. .flex) will be a harmless inline element.

In order to make the styles work without disrupting the layout, there had to be some changes to the HTML:

  • Wrapped <span class='flex'> around inputs 17 to 20.
  • Assigned classes .flex1, .flex2, .flex3, .flex4 to inputs 17 to 20.
  • The last 3 divs classes changed from .col-md-4 to .col-md-3.
  • Removed .col-md-9 and .row that was wrapped around inputs 18 to 20.
  • Moved input 17 inside .flex and wrapped a <div class='col-md-3'> around it.

PLUNKER

SNIPPET

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <style>
    .flex {
      display: flex;
      flex-direction: column;
    }
    .flex1 {
      order: 3;
    }
    .flex2 {
      order: 1;
    }
    .flex3 {
      order: 2;
    }
    .flex4 {
      order: 4;
    }
    @media screen and (min-width: 1000px) {
      .flex {
        display: inline;
      }
    }
  </style>
</head>

<body>
  <div class="row">
    <div class="col-md-3">
      <input name="textinput" type="text" placeholder="1" class="form-control" />
      <input name="textinput" type="text" placeholder="2" class="form-control" />
      <input name="textinput" type="text" placeholder="3" class="form-control" />
      <input name="textinput" type="text" placeholder="4" class="form-control" />
      <input name="textinput" type="text" placeholder="5" class="form-control" />
    </div>

    <div class="col-md-6">
      <div class="row">
        <div class="col-md-6">
          <input name="textinput" type="text" placeholder="6" class="form-control" />
          <input name="textinput" type="text" placeholder="7" class="form-control" />
          <input name="textinput" type="text" placeholder="8" class="form-control" />
          <input name="textinput" type="text" placeholder="9" class="form-control" />
        </div>
        <div class="col-md-6">
          <input name="textinput" type="text" placeholder="10" class="form-control" />
          <input name="textinput" type="text" placeholder="11" class="form-control" />
          <input name="textinput" type="text" placeholder="12" class="form-control" />
          <input name="textinput" type="text" placeholder="13" class="form-control" />
        </div>
      </div>
    </div>


    <div class="col-md-3">
      <input name="textinput" type="text" placeholder="14" class="form-control" />
      <input name="textinput" type="text" placeholder="15" class="form-control" />
      <input name="textinput" type="text" placeholder="16" class="form-control" />
    </div>

    <span class='flex'>
    <div class="col-md-3 flex1">
      <input name="textinput" type="text" placeholder="17 - Error Text Area" class="form-control" />
    </div>
    <div class="col-md-3 flex2">
      <input name="textinput" type="text" placeholder="18" class="form-control" />
    </div>
    <div class="col-md-3 flex3">
      <input name="textinput" type="text" placeholder="19" class="form-control" />
    </div>
    <div class="col-md-3 flex4">
      <input name="textinput" type="text" placeholder="20 - Button" class="form-control" />
    </div>
</span>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 2

Related Questions