Разное выравнивание на разных экранах

html

<div class="row">
    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 align">Блок 1</div>
    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 align">Блок 2</div>
</div>

css

 @media only screen and (min-width : 992px) and (max-width : 1200px)   
 {
    .align {text-align:left;}
 } 
 @media only screen and (min-width : 768px) and (max-width: 992px){
    .align {text-align:center;}
 } 
 @media only screen and (min-width : 480px) and (max-width: 768px){
    .align {text-align:center;}
 } 

.wrapper .block { 
  border: 1px solid; 
  padding: 10px; 
  text-align: center 
} 
 
@media screen (min-width: 900px) { 
  .wrapper { 
    display: flex 
  } 
  .wrapper .block { 
    text-align: left 
  } 
}

<div class="wrapper"> 
  <div class="block">1</div> 
  <div class="block">2</div> 
</div>