For my mobile version in CSS, I am considering two options:
- The first option is to create separate
divelements with classes 'desktop' and 'mobile', and build everything from scratch. Here's an example:
<div class="container-fluid bg-1 desktop1">
<div class="container">
<div class="col-xs-5 despre-noi-text first-section">
<h2>asdfsdfdf</h2>
<p class="despre-paragraph">
adsdadd
</p>
</div>
<div class="col-xs-7 despre-noi-img second-section"></div>
</div>
</div;
<div class="container-fluid mobile1">
<div class="container">
<div class ="row mobile-row">
<div class="col-xs-12 mobile1-img"></div>
</div>
<div class ="row mobile-row">
<div class="col-xs-12 mobile1-text">
<h2>asdfsdffdfsfsdf</h2>
<p class="mobile1-despre-paragraph">
asdfdfdfd
</p>
<p class="mobile1-despre-paragraph2">saddfsdfsdfsdfd</p>
</div>
</div>
</div>
</div>Then, I will use media queries to determine which classes should be hidden based on the screen resolution.
@media only screen and (max-width : 480px) {
.desktop1 { display:none; }
.mobile1 { display:block; }
}Alternatively, I could choose to overwrite all classes within the media queries. Which do you think is the better approach?