ボックスの並び順の指定

floatの値によってコントロールすることができます

float: left;

f:id:web-design-lesson:20160527235742j:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float:left;</title>
<style>
#container {
  width: 50%;
  height: auto;
}
.box {
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.wrapA>.box {
  width: 25%;
  float: left;
  box-sizing: border-box; 
}
.wrapA {
  overflow: hidden;
}
.box1 {
  background: #FBE4EE;
  border: 4px solid #EA6094;
}
.box2 {
  background: #FFFBCB;
  border: 4px solid #FFE500;
}
.box3 {
  background: #EDF7FD;
  border: 4px solid #4188C9;
}
.box4 {
  background: #F3F7E0;
  border: 4px solid #B5D22F;
}
</style>
</head>
<body>
<div id="container">
<div class="wrapA">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div><!-- /.wrapA -->
</div><!-- /#container -->
</body>
</html>

float: right;

f:id:web-design-lesson:20160528001701j:plain

.wrapA>.box {
  width: 25%;
  float: right;
  box-sizing: border-box; 
}