Bootstrap pills - show pills if mobile device else show all content (responsive) -

I am trying to understand how to show tablets if the screen is the XS layout (bootstrap) if it is a large device So I want to show all the content if the device is bigger then the phone-screen / bootstrap xs?

Now it will show only the active tab-pane, in which there is a way to remove the "tab-content" class on the content, including the contents of tablets if I'm on a large device, if I work on a phone size I use.

The question is if I'm on a small device, am I on a big device and tablets?

  & lt; Div id = "content" & gt; & Lt; H1 & gt; Test Pills & lt; / H1> & Lt; Ul id = "pills" class = "navbar-toggle nav-new-bullets" data-tab = "tablets" & gt; & Lt; Li class = "active" & gt; & Lt; A href = "# red" data-toggle = "tab" & gt; Red & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# Orange" data-toggle = "tab" & gt; ORGANGE & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "my-pills" class = "tab-content" & gt; & Lt; Div class = "tab-panel active" id = "red" & gt; & Lt; H1 & gt; Red & lt; / H1> & Lt; P & gt; Red red red red & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "tab-panel" id = "orange" & gt; & Lt; H1 & gt; Orange & lt; / H1> & Lt; P & gt; Orange orange orange orange orange & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Normally you use @ media This type of thing is required Bootstrap X is a screen size that is smaller than 768 pixels. If you want to change the contents in your website, when the screen is X, you have to use

  @ media (max-width: 768 px) {// keep your code here. .}  

You can hide display: none for example and display: block for those things You want to show