bootstrap：hidden-print without css

Question

我有以下代码可以在这里找到：[https://codepen.io/aaron_1986/pen/oBJOyK]。

我必须使用bootstrap（hidden-print）重写html代码，我根本无法触摸css代码。我所要做的就是在打印视图上打印出打印页面的样式 - 没有h1大小的文本和只有基本的[文本]样式链接。

有人可以解释或帮助我完成整个过程吗？

HTML：

<header>
   <h1 class="hidden-lg-up">Only show this on print screen</h1>
   <h1 class="hidden-md-down hidden-print">show this on medium size and up</h1>

  <nav>
     <a href="http://www.example.com/">link to homepage</a>
     <a href="http://www.example.com/">other link</a>
  </nav>

的CSS：

header {
   background-color:#0066FF;
   padding: 1%;
   margin: 1%;
}

header h1 {
    font-size: 3rem;
    color:rgba(0,0,0,.7);;

}

nav a {
    display:block;
    background-color: white;
    border: 1px solid black;
    text-align: center;
    border-radius: 35px;
    text-decoration: none;
    padding: 2%;
    margin: 1%;
}

h1 {
    text-align: center;
    color:rgba(255,0,0,.7);
}

Print out image - not working