How do I show a div in x-small and  small devices only? If I add  classes  
slds-x-small-show-only  and slds-small-show-only ,only the last one take effect. 
 

<div class="slds-box slds-x-small-show-only slds-small-show-only">
    <label>
      <input type="checkbox" ng-model="vm.showDollar">
      Dollar Value
    </label><br>
    </div>

This is my current workaround , but this duplicate the code. 

<nav class="slds-col slds-size--1-of-1">
    <br>
    <div class="slds-box slds-x-small-show-only ">
    <label>
      <input type="checkbox" ng-model="vm.showDollar">
      Dollar Value
    </label><br>
    </div>
    <div class="slds-box slds-small-show-only ">
      <label>
        <input type="checkbox" ng-model="vm.showDollar">
        Dollar Value
      </label><br>
    </div>
   </nav>

Any pointers?

sree
 

getting this error when trying to run a lighning app . If I remove the extends="ltng:outApp" , the error goes away. Any suggestions ?
-lightning is enabled in the org.
-extends ltng:outApp is required to include this in a VF page. 

<aura:application access="GLOBAL" extends="ltng:outApp">
    <!-- Define the Design System static resource (version 0.9.0) -->
    <c:scoryAppCard />
</aura:application>

any suggestions?
 

How do I show a div in x-small and  small devices only? If I add  classes  
slds-x-small-show-only  and slds-small-show-only ,only the last one take effect. 
 

<div class="slds-box slds-x-small-show-only slds-small-show-only">
    <label>
      <input type="checkbox" ng-model="vm.showDollar">
      Dollar Value
    </label><br>
    </div>

This is my current workaround , but this duplicate the code. 

<nav class="slds-col slds-size--1-of-1">
    <br>
    <div class="slds-box slds-x-small-show-only ">
    <label>
      <input type="checkbox" ng-model="vm.showDollar">
      Dollar Value
    </label><br>
    </div>
    <div class="slds-box slds-small-show-only ">
      <label>
        <input type="checkbox" ng-model="vm.showDollar">
        Dollar Value
      </label><br>
    </div>
   </nav>

Any pointers?

sree
 

getting this error when trying to run a lighning app . If I remove the extends="ltng:outApp" , the error goes away. Any suggestions ?
-lightning is enabled in the org.
-extends ltng:outApp is required to include this in a VF page. 

<aura:application access="GLOBAL" extends="ltng:outApp">
    <!-- Define the Design System static resource (version 0.9.0) -->
    <c:scoryAppCard />
</aura:application>

any suggestions?