<section class="services-wrap">
        <h3>OUR SERVICE</h3>
        <hr>
        <div class="services-flex">
            <div id="service-box" class="flex-box">
                <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/comercial.jpg">
            </div>
            <div id="service-box" class="flex-box">
                <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/residential.jpg">
            </div>
            <div id="service-box" class="flex-box">
                <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/rural.jpg">
            </div>
            <div id="service-box" class="flex-box">
                <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/industrial.jpg">
            </div>
            <div id="service-box" class="flex-box">
                <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/other.jpg">
            </div>
            <div id="service-box" class="flex-box">
                <img class="service-img" src="<?php bloginfo('template_url'); ?>/images/service-img/other.jpg">
            </div>

        </div>

    </section>

/* ## Services */
.services-wrap {
    text-align: center;
    padding-top: 4rem;
}
.services-flex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
 .services-flex {
    flex-direction: row;
    padding: 0 4rem;
    flex-wrap: wrap;
    align-items: stretch;
    max-width: 1500px;
    margin: auto;
  }
 .flex-box {
    flex: 1 30%;
    margin: 1rem;
 }

}