Swapping Bootstrap column order in single row on mobile

Issue

I have an issue with bootstrap columns and can't seem to resolve swapping the order on smaller devices. I don't want these to stack because they stay a single row on desktop, tablet and mobile. However, on Desktop and tablet I want the row in the default order like this:

Logo Menu Button

But on phones, I simply want the first two columns swapped, like so:

Menu Logo Button

How can I achieve a simple reverse of the columns while keeping the row?

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-xs-4 col-xs-order-2">
        Logo
        </div>
        <div class="col-lg-6 col-xs-4 col-xs-order-1">
        Menu
        </div>
        <div class="col-xs-4 hidden-lg col-xs-order-3">
        Button
        </div>
    </div>
</div>

Update: screenshot of current result

Solution

The issue is that Bootstrap-4 dropped the order-xs class as it is the default class. If you want to apply changes for only xs-classes you have to change the roder for all elements and use order-sm--class to correct the order at sm-width:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-xs-4 order-2 sm-order-1">
        Logo
        </div>
        <div class="col-lg-6 col-xs-4 order-1 sm-order-2">
        Menu
        </div>
        <div class="col-xs-4 hidden-lg order-3 sm-order-3">
        Button
        </div>
    </div>
</div>

Answered By - tacoshy