title: Responsive grid with one element being fixed (relative to the first element in the grid)
body: <p>I have a horizontal banner that I would like to keep right below the large square (top-left corner in the grid, see Fig. <a href="https://i.stack.imgur.com/wGeu3.png" rel="nofollow noreferrer">1</a>). This means, that in the grid, I will have 1(large)+6(regular) grid elements, before I have the banner.</p>
  
  <p><img src="https://i.stack.imgur.com/wGeu3.png" alt="No zoom"></p>
  
  <p>In case one zooms in on the page, or views it on a smaller resolution, I would like to keep the horizontal banner right below the large square, as seen in Fig. <a href="https://i.stack.imgur.com/QKuJS.png" rel="nofollow noreferrer">2</a>.</p>
  
  <p><img src="https://i.stack.imgur.com/QKuJS.png" alt="Some zoom"></p>
  
  <p>And, if a user uses a resolution that can fit only the large square across, and no regular squares - then I would like to place all regular squares right after the banner, as seen in Fig. <a href="https://i.stack.imgur.com/XCwPL.png" rel="nofollow noreferrer">3</a>.</p>
  
  <p>How can I achieve this?</p>
  
  <p>I use Bootstrap 3 and Angular.</p>
  
  <p>Thank you very much.</p>
  
  <p><img src="https://i.stack.imgur.com/XCwPL.png" alt="Max zoom"></p>