How to make such a simple structure responsively on bootstrap?

Question

css

That's actually the whole task

of how to make such a thing so that the pictures inside are equally beautiful on all devices, preferably without using media?

Answer 1

Added a menu from "@Proger_rys_007
jsfiddle.net/dkweb/70mqc4w0/1
Like this?
I think you can achieve about square ones too ... but I can hardly imagine two squares for the entire width of the screen.

Answer 2

use the col classes, set the width of the images themselves to 100%, while the width of the col area will decrease, both the width and height of the images will decrease in proportion to getbootstrap.com/css , the Grid options table
and the menu with this code:

<nav id="navbar_fon" class="navbar navbar-default">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                  </div>
                  <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                      <li class="pnkt_1"><a href="#header_my">Home</a></li>
                      <li class="pnkt_2"><a href="#block_4_work">Works</a></li>
                      <li class="pnkt_3"><a href="#block_6_we">Industries</a></li>
                      <li class="pnkt_4"><a href="#block_3_experience">Service</a></li>
                      <li class="pnkt_5"><a href="#block_5_slide2">News</a></li>
                      <li class="pnkt_6"><a href="#block_7">Who we are</a></li>
                      <li class="pnkt_7"><a href="#block_9_footer">Contact</a></li>
                    </ul>   
                    
                  </div><!--/.nav-collapse -->
                </div><!--/.container-fluid -->
              </nav>

Answer 3

And what about bootstrap? This is done by hand.