.box-container { width:100%; display:-webkit-flex; display:-ms-flex; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.box-left { display:-webkit-flex; display:-ms-flexbox; display:flex; padding:10px; float:left; margin-bottom:10px; background-color:#fdfdfd; border:1px solid #cccccc; border-radius:10px; }
.box-left ul { margin-left:20px; }
.box-right ul { margin-left:20px; }
.box-right { display:-webkit-flex; display:-ms-flexbox; display:flex; padding:10px; float:left; margin-bottom:10px; background-color:#fdfdfd; border:1px solid #cccccc; border-radius:10px; }
.box-mid { padding:10px; float:left; margin-bottom:10px; background-color:#fdfdfd; border:1px solid #cccccc; border-radius:10px; }

@media (min-width:1000px) { 
.box-left { width:45%; margin-right:20px; } 
.box-right { width:45%; } 
}
@media (max-width:999px) { 
.box-left { width:100%; } 
.box-right { width:100%; } 
}