Framework7网格布局以包含桌面视图

Question

I know that framework7 is designed for phones and tablet but is there a way to include or somehow tweak the css to make it compatible for desktop?my scenario is i have two div elements that i want to view side by side on desktop.

  <div class="row">
      <div class="col-50">panel-1</div>
      <div class="col-50">panel-2</div>
    </div>  

But on tablet/phone view i want it to view both as 100%

 <div class="row">
      <div class="tablet-100">panel-1</div>
      <div class="tablet-100">panel-2</div>
    </div> 

I tried below but the documentation said tablet class is for window width >= 768px, so the width is 100% even on desktop view.

<div class="row">
      <div class="col-50 tablet-100">panel-1</div>
      <div class="col-50 tablet-100">panel-2</div>
    </div> 

I am thinking of adding a custom css like desktop-XX, but how can i add it and overwrite the current grid system? Any suggestion would be great thanks in advance!

Answer 1

@media (min-width:768px){
.col-50{
width:50%;
}
}

this should work