reverse button order and align right

Purely CSS way to move buttons to the right and change the order, when the HTML cannot be edited.

by Amy Ruddy

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div id="mainContent">
  <p><span id="headline">div.buttons</span></p>
  
  <!-- Buttons Div -->
  <div class="buttons" id="buttons">
    <button id="continue" aria-label="Save">Save</button>
    <button id="cancel" aria-label="Cancel" formnovalidate="">Cancel</button>
  </div>
  <!-- End Buttons Div -->
 
</div>


<!-- scroll down to see rest of HTML -->









<button id="moveButtons" onclick="moveButtons()">Move Buttons</button>


<div id="css" class="d-none">
  <div>CSS</div>
  <code><span class="text-danger">div</span><span class="text-warning">.buttons</span> { <br />
    &emsp;&emsp;<span class='text-success'>display</span>: <span class="orange">flex</span>; <br />
    &emsp;&emsp;<span class='text-success'>flex-direction</span>: <span class="orange">row-reverse</span>; <br />
    }
  </code>
</div>

CSS

.moveButtons {
  display: flex;
  flex-direction: row-reverse;
}

div#mainContent {
  width: 85%;
  border: 1px solid #345580;
  margin: 20px auto;
  padding: 15px;
}

p {
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: white;
  transform: translateY(-28px);
  height: 0;
  color: #345580;
}

span#headline {
  background-color: white;
  padding: 0 0.5rem;

}

div.buttons {
  padding: 15px;
}

button {
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: .7rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  border-radius: 0.1875rem;
  background-color: #345580;
  color: #fff;
  letter-spacing: 0.05rem;
  width: 100%;
}

button {
  width: 49%;
}

button#cancel {
  margin-right: 0.75rem;
  color: #345580;
  border: 1px solid #345580;
  background-color: transparent !important;
}

button#moveButtons {
  display: block;
  margin: 0 auto;
}

#css {
  width: 85%;
  margin: 0 auto;
}

code,
#css {
  color: #444;
  font-size: 1.3rem;
}

.orange {
  color: orange;
}

JavaScript

function moveButtons() {
  $('.buttons').toggleClass("moveButtons");
  $('#css').toggleClass('d-block, d-none');

}