How to swap two button elements using float in CSS - html

Question

I have two buttons and I would like to swap them using float. How can I do it?
<div class="modal-footer">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
Thank you. Any help would be appreciated.

Answer 1

With additional CSS, you could float the cancel button to the right.
.modal-footer .btn-default {
float:right
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" charset="utf-8">
<div class="modal-footer">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
or
You can use one of the helper classes on the first button --- pull-right.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" charset="utf-8">
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
You may additionally need to add a clearfix depending on other content in the modal.

Answer 2

Using flexbox:
You can use the flexbox property order. Like the property name suggests, it changes the order of flex-items.
More info here.
Code Snippet:
.modal-footer {
display: flex;
justify-content: flex-end;
}
.modal-footer .btn:last-of-type {
order: -1;
}
<div class="modal-footer">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>

Answer 3

.right {
float: right;
}
.left {
float: left;
}
<div class="modal-footer">
<button type="button" class="right btn btn-default">Cancel</button>
<button type="button" class="left btn btn-primary" data-dismiss="modal">Delete</button>
</div>
you can also use
order: 1 and order: -1
.modal-footer {
display: -webkit-flex; /* Safari */
display: flex;
}
.first {
order: 1
}
.second {
order: 2
}
<div class="modal-footer">
<button type="button" class="second btn btn-default">Cancel</button>
<button type="button" class="first btn btn-primary" data-dismiss="modal">Delete</button>
</div>
read CSS order property