Bootstrap 3 move position of divs on mobile - css

Question

So according to this: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering I should be able to swap the position of the divs based on the viewport.
I tried with the following html (it is twig - but that shouldn't make a difference):
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-12 col-xs-push-12" id="recommend-container">
<h1>
<i class="fas fa-chess-king"></i>
Solomon
</h1>
<hr />
<div id="recommend-contents">
<p>Solomon Recommends:</p>
{% for type,recommend in recommendations %}
<h3>{{ type }}</h3>
<ul>
{% for index,name in recommend %}
<li>{{ name }}</li>
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
<div class="col-md-6 col-xs-12 col-xs-pull-12" id="register-section-container">
<h1>Register</h1>
<hr />
{{ form_start(form) }}
{{ form_row(form.username, { 'attr': {'class': 'form-control login-input', 'placeholder': 'username'} }) }}
{{ form_row(form.email, { 'attr': {'class': 'form-control login-input', 'placeholder': 'email'} }) }}
{{ form_row(form.plainPassword.first, { 'attr': {'class': 'form-control login-input', 'placeholder': 'password'} }) }}
{{ form_row(form.plainPassword.second, { 'attr': {'class': 'form-control login-input', 'placeholder': 'retype password'} }) }}
<div class="register-btn-container">
<button class="btn btn-primary d-inline-block" type="submit">
<i class="fas fa-check"></i>
Register
</button>
<p class="d-inline-block">Already signed up? Login</p>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
</div>
which not only doesn't work on mobile, but creates a weird space between the divs on desktop view? I really don't understand the logic of it, how do I debug or fix? (CSS is the real Isildur's bane)

Answer 1

I believe you issue is du to the fact that Bootstrap is a mobile first framework, and you try to use it as a desktop first one.
You should place divs the way you want them to be displayed on a mobile, THEN pull/push them on larger screen :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<!-- LEFT ON DESKTOP -->
<div class="col-xs-12 col-sm-6 col-sm-push-6" id="recommend-container">
I'm on the right on desktop
</div>
<!-- RIGHT ON DESKTOP -->
<div class="col-xs-12 col-sm-6 col-sm-pull-6" id="register-section-container">
I'm on the left on desktop
</div>
</div>
</div>
Here is that will append:
on mobile devices (viewport under 768px width): the .col-xs-12 rule apply so divs should be display on top of each other in the same order as the code.
Then when you reach 768px width (and up): the .col-sm-6 rule apply so you should have the two columns displayed side by side as each column is set to occupy 1/2 of the available space (6/12 to be exact :)).
And as you want to "inverse" the "logical" order of the columns, you add one rule to push the first column on the right (.col-sm-pull-6), and one rule to pull the second column on the left (.col-sm-pull-6).
As long as you don't have rules specific to superior width (aka: "md" and "lg"), the "sm" rule will be used on larger screens.