Different layouts - bad for SEO

Question

At the bottom of my web page, I've got a list of countries of 20 countries (generated so it changes everyday). According to the display type, I'm going to have 4, 3 or 2 columns. A PHP script generates the output for the 3 display types.

I guess this is very bad in terms of SEO and repetition is never a good idea anyway (more code to load, etc.). I'm quite new to bootstrap. Would there be a better way to do that ?

<div class="row">
    <div class="visible-lg visible-md">
        <div class="col-lg-3 col-md-3">
            <ul>
                <li><a href="Argentina/"><img src="/img/flags/Argentina.png"/>Argentina</a></li>
                <li><a href="Australia/"><img src="/img/flags/Australia.png"/>Australia</a></li>
                <li><a href="Austria/"><img src="/img/flags/Austria.png"/>Austria</a></li>
                <li><a href="Belgium/"><img src="/img/flags/Belgium.png"/>Belgium</a></li>
                <li><a href="Canada/"><img src="/img/flags/Canada.png"/>Canada</a></li>
                <li><a href="Colombia/"><img src="/img/flags/Colombia.png"/>Colombia</a></li>
            </ul>
        </div>

        <div class="col-lg-3 col-md-3">
            <ul>
                <li><a href="Czech-Republic/"><img src="/img/flags/Czech-Republic.png"/>Czech Republic</a></li>
                <li><a href="Denmark/"><img src="/img/flags/Denmark.png"/>Denmark</a></li>
                <li><a href="France/"><img src="/img/flags/France.png"/>France</a></li>
                <li><a href="Germany/"><img src="/img/flags/Germany.png"/>Germany</a></li>
                <li><a href="Ireland/"><img src="/img/flags/Ireland.png"/>Ireland</a></li>
                <li><a href="Israel/"><img src="/img/flags/Israel.png"/>Israel</a></li>
            </ul>
        </div>

        <div class="col-lg-3 col-md-3">
            <ul>
                <li><a href="Italy/"><img src="/img/flags/Italy.png"/>Italy</a></li>
                <li><a href="Mexico/"><img src="/img/flags/Mexico.png"/>Mexico</a></li>
                <li><a href="Netherlands/"><img src="/img/flags/Netherlands.png"/>Netherlands</a></li>
                <li><a href="Norway/"><img src="/img/flags/Norway.png"/>Norway</a></li>
                <li><a href="Poland/"><img src="/img/flags/Poland.png"/>Poland</a></li>
                <li><a href="Portugal/"><img src="/img/flags/Portugal.png"/>Portugal</a></li>
            </ul>
        </div>

        <div class="col-lg-3 col-md-3">
            <ul>
                <li><a href="Spain/"><img src="/img/flags/Spain.png"/>Spain</a></li>
                <li><a href="Sweden/"><img src="/img/flags/Sweden.png"/>Sweden</a></li>
                <li><a href="Switzerland/"><img src="/img/flags/Switzerland.png"/>Switzerland</a></li>
                <li><a href="Turkey/"><img src="/img/flags/Turkey.png"/>Turkey</a></li>
                <li><a href="United-Arab-Emirates/"><img src="/img/flags/United-Arab-Emirates.png"/>United Arab Emirates</a></li>
                <li><a href="United-Kingdom/"><img src="/img/flags/United-Kingdom.png"/>United Kingdom</a></li>
            </ul>
        </div>
    </div>

    <div class="visible-sm">
        <div class="col-sm-4">
            <ul>
                <li><a href="Argentina/"><img src="/img/flags/Argentina.png"/>Argentina</a></li>
                <li><a href="Australia/"><img src="/img/flags/Australia.png"/>Australia</a></li>
                <li><a href="Austria/"><img src="/img/flags/Austria.png"/>Austria</a></li>
                <li><a href="Belgium/"><img src="/img/flags/Belgium.png"/>Belgium</a></li>
                <li><a href="Canada/"><img src="/img/flags/Canada.png"/>Canada</a></li>
                <li><a href="Colombia/"><img src="/img/flags/Colombia.png"/>Colombia</a></li>
                <li><a href="Czech-Republic/"><img src="/img/flags/Czech-Republic.png"/>Czech Republic</a></li>
                <li><a href="Denmark/"><img src="/img/flags/Denmark.png"/>Denmark</a></li>
            </ul>
        </div>

        <div class="col-sm-4">
            <ul>
                <li><a href="France/"><img src="/img/flags/France.png"/>France</a></li>
                <li><a href="Germany/"><img src="/img/flags/Germany.png"/>Germany</a></li>
                <li><a href="Ireland/"><img src="/img/flags/Ireland.png"/>Ireland</a></li>
                <li><a href="Israel/"><img src="/img/flags/Israel.png"/>Israel</a></li>
                <li><a href="Italy/"><img src="/img/flags/Italy.png"/>Italy</a></li>
                <li><a href="Mexico/"><img src="/img/flags/Mexico.png"/>Mexico</a></li>
                <li><a href="Netherlands/"><img src="/img/flags/Netherlands.png"/>Netherlands</a></li>
                <li><a href="Norway/"><img src="/img/flags/Norway.png"/>Norway</a></li>
            </ul>
        </div>

        <div class="col-sm-4">
            <ul>
                <li><a href="Poland/"><img src="/img/flags/Poland.png"/>Poland</a></li>
                <li><a href="Portugal/"><img src="/img/flags/Portugal.png"/>Portugal</a></li>
                <li><a href="Spain/"><img src="/img/flags/Spain.png"/>Spain</a></li>
                <li><a href="Sweden/"><img src="/img/flags/Sweden.png"/>Sweden</a></li>
                <li><a href="Switzerland/"><img src="/img/flags/Switzerland.png"/>Switzerland</a></li>
                <li><a href="Turkey/"><img src="/img/flags/Turkey.png"/>Turkey</a></li>
                <li><a href="United-Arab-Emirates/"><img src="/img/flags/United-Arab-Emirates.png"/>United Arab Emirates</a></li>
                <li><a href="United-Kingdom/"><img src="/img/flags/United-Kingdom.png"/>United Kingdom</a></li>
            </ul>
        </div>
    </div>

    <div class="visible-xs">
        <div class="col-xs-6">
            <ul>
                <li><a href="Argentina/"><img src="/img/flags/Argentina.png"/>Argentina</a></li>
                <li><a href="Australia/"><img src="/img/flags/Australia.png"/>Australia</a></li>
                <li><a href="Austria/"><img src="/img/flags/Austria.png"/>Austria</a></li>
                <li><a href="Belgium/"><img src="/img/flags/Belgium.png"/>Belgium</a></li>
                <li><a href="Canada/"><img src="/img/flags/Canada.png"/>Canada</a></li>
                <li><a href="Colombia/"><img src="/img/flags/Colombia.png"/>Colombia</a></li>
                <li><a href="Czech-Republic/"><img src="/img/flags/Czech-Republic.png"/>Czech Republic</a></li>
                <li><a href="Denmark/"><img src="/img/flags/Denmark.png"/>Denmark</a></li>
                <li><a href="France/"><img src="/img/flags/France.png"/>France</a></li>
                <li><a href="Germany/"><img src="/img/flags/Germany.png"/>Germany</a></li>
                <li><a href="Ireland/"><img src="/img/flags/Ireland.png"/>Ireland</a></li>
                <li><a href="Israel/"><img src="/img/flags/Israel.png"/>Israel</a></li>
                <li><a href="Italy/"><img src="/img/flags/Italy.png"/>Italy</a></li>
            </ul>
        </div>

        <div class="col-xs-6">
            <ul>
                <li><a href="Mexico/"><img src="/img/flags/Mexico.png"/>Mexico</a></li>
                <li><a href="Netherlands/"><img src="/img/flags/Netherlands.png"/>Netherlands</a></li>
                <li><a href="Norway/"><img src="/img/flags/Norway.png"/>Norway</a></li>
                <li><a href="Poland/"><img src="/img/flags/Poland.png"/>Poland</a></li>
                <li><a href="Portugal/"><img src="/img/flags/Portugal.png"/>Portugal</a></li>
                <li><a href="Spain/"><img src="/img/flags/Spain.png"/>Spain</a></li>
                <li><a href="Sweden/"><img src="/img/flags/Sweden.png"/>Sweden</a></li>
                <li><a href="Switzerland/"><img src="/img/flags/Switzerland.png"/>Switzerland</a></li>
                <li><a href="Turkey/"><img src="/img/flags/Turkey.png"/>Turkey</a></li>
                <li><a href="United-Arab-Emirates/"><img src="/img/flags/United-Arab-Emirates.png"/>United Arab Emirates</a></li>
                <li><a href="United-Kingdom/"><img src="/img/flags/United-Kingdom.png"/>United Kingdom</a></li>
                <li><a href="United-States/"><img src="/img/flags/United-States.png"/>United States</a></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

If you want to avoid seo problems, you can fix your problem like this:

1. Code here
2. Result here

---

<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Argentina/"><img src="/img/flags/Argentina.png"/>Argentina</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Australia/"><img src="/img/flags/Australia.png"/>Australia</a></li>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Austria/"><img src="/img/flags/Austria.png"/>Austria</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Belgium/"><img src="/img/flags/Belgium.png"/>Belgium</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Canada/"><img src="/img/flags/Canada.png"/>Canada</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Colombia/"><img src="/img/flags/Colombia.png"/>Colombia</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Czech-Republic/"><img src="/img/flags/Czech-Republic.png"/>Czech Republic</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Denmark/"><img src="/img/flags/Denmark.png"/>Denmark</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="France/"><img src="/img/flags/France.png"/>France</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Germany/"><img src="/img/flags/Germany.png"/>Germany</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Ireland/"><img src="/img/flags/Ireland.png"/>Ireland</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Israel/"><img src="/img/flags/Israel.png"/>Israel</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Italy/"><img src="/img/flags/Italy.png"/>Italy</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Mexico/"><img src="/img/flags/Mexico.png"/>Mexico</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Netherlands/"><img src="/img/flags/Netherlands.png"/>Netherlands</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">      
        <a href="Norway/"><img src="/img/flags/Norway.png"/>Norway</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Poland/"><img src="/img/flags/Poland.png"/>Poland</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Portugal/"><img src="/img/flags/Portugal.png"/>Portugal</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Spain/"><img src="/img/flags/Spain.png"/>Spain</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Sweden/"><img src="/img/flags/Sweden.png"/>Sweden</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Switzerland/"><img src="/img/flags/Switzerland.png"/>Switzerland</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="Turkey/"><img src="/img/flags/Turkey.png"/>Turkey</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="United-Arab-Emirates/"><img src="/img/flags/United-Arab-Emirates.png"/>United Arab Emirates</a>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <a href="United-Kingdom/"><img src="/img/flags/United-Kingdom.png"/>United Kingdom</a>
    </div>             
</div>

No repetive content, and you should replace the ul with a standard bootstrap div.

If you want to have a simplified version that works, you can remove all the div's and move the class from the div to the <a> and your code will look like this:

<div class="row">
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Argentina/"><img src="/img/flags/Argentina.png"/>Argentina</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Australia/"><img src="/img/flags/Australia.png"/>Australia</a></li>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Austria/"><img src="/img/flags/Austria.png"/>Austria</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Belgium/"><img src="/img/flags/Belgium.png"/>Belgium</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Canada/"><img src="/img/flags/Canada.png"/>Canada</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Colombia/"><img src="/img/flags/Colombia.png"/>Colombia</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Czech-Republic/"><img src="/img/flags/Czech-Republic.png"/>Czech Republic</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Denmark/"><img src="/img/flags/Denmark.png"/>Denmark</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="France/"><img src="/img/flags/France.png"/>France</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Germany/"><img src="/img/flags/Germany.png"/>Germany</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Ireland/"><img src="/img/flags/Ireland.png"/>Ireland</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Israel/"><img src="/img/flags/Israel.png"/>Israel</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Italy/"><img src="/img/flags/Italy.png"/>Italy</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Mexico/"><img src="/img/flags/Mexico.png"/>Mexico</a>
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Netherlands/"><img src="/img/flags/Netherlands.png"/>Netherlands</a>         
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Norway/"><img src="/img/flags/Norway.png"/>Norway</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Poland/"><img src="/img/flags/Poland.png"/>Poland</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Portugal/"><img src="/img/flags/Portugal.png"/>Portugal</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Spain/"><img src="/img/flags/Spain.png"/>Spain</a>
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Sweden/"><img src="/img/flags/Sweden.png"/>Sweden</a>
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Switzerland/"><img src="/img/flags/Switzerland.png"/>Switzerland</a>
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="Turkey/"><img src="/img/flags/Turkey.png"/>Turkey</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="United-Arab-Emirates/"><img src="/img/flags/United-Arab-Emirates.png"/>United Arab Emirates</a>    
    <a class="col-lg-3 col-md-3 col-sm-4 col-xs-6" href="United-Kingdom/"><img src="/img/flags/United-Kingdom.png"/>United Kingdom</a>               
</div>

1. Code here
2. Result here

If you want this to be responsive, seo friendly and keep the alphabetical order, all that i think at in this moment in javascript.

var xs = '<a class="col-xs-6" href="Argentina/"><img src="/img/flags/Argentina.png"/>Argentina</a><a class="col-xs-6" href="Mexico/"><img src="/img/flags/Mexico.png"/>Mexico</a><a class="col-xs-6" href="Australia/"><img src="/img/flags/Australia.png"/>Australia</a></li><a class="col-xs-6" href="Netherlands/"><img src="/img/flags/Netherlands.png"/>Netherlands</a><a class="col-xs-6" href="Austria/"><img src="/img/flags/Austria.png"/>Austria</a><a class="col-xs-6" href="Norway/"><img src="/img/flags/Norway.png"/>Norway</a><a class="col-xs-6" href="Belgium/"><img src="/img/flags/Belgium.png"/>Belgium</a><a class="col-xs-6" href="Poland/"><img src="/img/flags/Poland.png"/>Poland</a><a class="col-xs-6" href="Canada/"><img src="/img/flags/Canada.png"/>Canada</a><a class="col-xs-6" href="Portugal/"><img src="/img/flags/Portugal.png"/>Portugal</a><a class="col-xs-6" href="Colombia/"><img src="/img/flags/Colombia.png"/>Colombia</a><a class="col-xs-6" href="Spain/"><img src="/img/flags/Spain.png"/>Spain</a><a class="col-xs-6" href="Czech-Republic/"><img src="/img/flags/Czech-Republic.png"/>Czech Republic</a><a class="col-xs-6" href="Sweden/"><img src="/img/flags/Sweden.png"/>Sweden</a><a class="col-xs-6" href="Denmark/"><img src="/img/flags/Denmark.png"/>Denmark</a><a class="col-xs-6" href="Switzerland/"><img src="/img/flags/Switzerland.png"/>Switzerland</a><a class="col-xs-6" href="France/"><img src="/img/flags/France.png"/>France</a><a class="col-xs-6" href="Turkey/"><img src="/img/flags/Turkey.png"/>Turkey</a><a class="col-xs-6" href="Germany/"><img src="/img/flags/Germany.png"/>Germany</a><a class="col-xs-6" href="United-Arab-Emirates/"><img src="/img/flags/United-Arab-Emirates.png"/>United Arab Emirates</a><a class="col-xs-6" href="Ireland/"><img src="/img/flags/Ireland.png"/>Ireland</a><a class="col-xs-6" href="United-Kingdom/"><img src="/img/flags/United-Kingdom.png"/>United Kingdom</a><a class="col-xs-6" href="Israel/"><img src="/img/flags/Israel.png"/>Israel</a><a class="col-xs-6" href="United-States/"><img src="/img/flags/United-States.png"/>United States</a><a class="col-xs-6" href="Italy/"><img src="/img/flags/Italy.png"/>Italy</a>';

var sm = '<a class="col-sm-4" href="Argentina/"><img src="/img/flags/Argentina.png"/>Argentina</a><a class="col-sm-4" href="France/"><img src="/img/flags/France.png"/>France</a><a class="col-sm-4" href="Poland/"><img src="/img/flags/Poland.png"/>Poland</a><a class="col-sm-4" href="Australia/"><img src="/img/flags/Australia.png"/>Australia</a></li><a class="col-sm-4" href="Germany/"><img src="/img/flags/Germany.png"/>Germany</a><a class="col-sm-4" href="Portugal/"><img src="/img/flags/Portugal.png"/>Portugal</a><a class="col-sm-4" href="Austria/"><img src="/img/flags/Austria.png"/>Austria</a><a class="col-sm-4" href="Ireland/"><img src="/img/flags/Ireland.png"/>Ireland</a><a class="col-sm-4" href="Spain/"><img src="/img/flags/Spain.png"/>Spain</a><a class="col-sm-4" href="Belgium/"><img src="/img/flags/Belgium.png"/>Belgium</a><a class="col-sm-4" href="Israel/"><img src="/img/flags/Israel.png"/>Israel</a><a class="col-sm-4" href="Sweden/"><img src="/img/flags/Sweden.png"/>Sweden</a><a class="col-sm-4" href="Canada/"><img src="/img/flags/Canada.png"/>Canada</a><a class="col-sm-4" href="Italy/"><img src="/img/flags/Italy.png"/>Italy</a><a class="col-sm-4" href="Switzerland/"><img src="/img/flags/Switzerland.png"/>Switzerland</a><a class="col-sm-4" href="Colombia/"><img src="/img/flags/Colombia.png"/>Colombia</a><a class="col-sm-4" href="Mexico/"><img src="/img/flags/Mexico.png"/>Mexico</a><a class="col-sm-4" href="Turkey/"><img src="/img/flags/Turkey.png"/>Turkey</a><a class="col-sm-4" href="Czech-Republic/"><img src="/img/flags/Czech-Republic.png"/>Czech Republic</a><a class="col-sm-4" href="Netherlands/"><img src="/img/flags/Netherlands.png"/>Netherlands</a><a class="col-sm-4" href="United-Arab-Emirates/"><img src="/img/flags/United-Arab-Emirates.png"/>United Arab Emirates</a><a class="col-sm-4" href="Denmark/"><img src="/img/flags/Denmark.png"/>Denmark</a><a class="col-sm-4" href="Norway/"><img src="/img/flags/Norway.png"/>Norway</a><a class="col-sm-4" href="United-Kingdom/"><img src="/img/flags/United-Kingdom.png"/>United Kingdom</a>';

var md = '<a class="col-md-3" href="Argentina/"><img src="/img/flags/Argentina.png"/>Argentina</a><a class="col-md-3" href="Czech-Republic/"><img src="/img/flags/Czech-Republic.png"/>Czech Republic</a><a class="col-md-3" href="Italy/"><img src="/img/flags/Italy.png"/>Italy</a><a class="col-md-3" href="Spain/"><img src="/img/flags/Spain.png"/>Spain</a><a class="col-md-3" href="Australia/"><img src="/img/flags/Australia.png"/>Australia</a></li><a class="col-md-3" href="Denmark/"><img src="/img/flags/Denmark.png"/>Denmark</a><a class="col-md-3" href="Mexico/"><img src="/img/flags/Mexico.png"/>Mexico</a><a class="col-md-3" href="Sweden/"><img src="/img/flags/Sweden.png"/>Sweden</a><a class="col-md-3" href="Austria/"><img src="/img/flags/Austria.png"/>Austria</a><a class="col-md-3" href="France/"><img src="/img/flags/France.png"/>France</a><a class="col-md-3" href="Netherlands/"><img src="/img/flags/Netherlands.png"/>Netherlands</a><a class="col-md-3" href="Switzerland/"><img src="/img/flags/Switzerland.png"/>Switzerland</a><a class="col-md-3" href="Belgium/"><img src="/img/flags/Belgium.png"/>Belgium</a><a class="col-md-3" href="Germany/"><img src="/img/flags/Germany.png"/>Germany</a><a class="col-md-3" href="Norway/"><img src="/img/flags/Norway.png"/>Norway</a><a class="col-md-3" href="Turkey/"><img src="/img/flags/Turkey.png"/>Turkey</a><a class="col-md-3" href="Canada/"><img src="/img/flags/Canada.png"/>Canada</a><a class="col-md-3" href="Ireland/"><img src="/img/flags/Ireland.png"/>Ireland</a><a class="col-md-3" href="Poland/"><img src="/img/flags/Poland.png"/>Poland</a><a class="col-md-3" href="United-Arab-Emirates/"><img src="/img/flags/United-Arab-Emirates.png"/>United Arab Emirates</a><a class="col-md-3" href="Colombia/"><img src="/img/flags/Colombia.png"/>Colombia</a><a class="col-md-3" href="Israel/"><img src="/img/flags/Israel.png"/>Israel</a><a class="col-md-3" href="Portugal/"><img src="/img/flags/Portugal.png"/>Portugal</a><a class="col-md-3" href="United-Kingdom/"><img src="/img/flags/United-Kingdom.png"/>United Kingdom</a>';

var device = '';

function updateFlags(){
    if ($(window).width() < 768) {
        if (device != 'xs') $('.row').html(xs);
        device = 'xs';
    }

    if ($(window).width() >= 768 && $(window).width() < 992) {
        if (device != 'sm') $('.row').html(sm);
        device = 'sm';
    }

    if ($(window).width() >= 992) {
        if (device != 'md') $('.row').html(md);
        device = 'md';
    }
}

$(document).ready(function(){

    updateFlags();

    $(window).resize(function() {
        updateFlags();    
    });
});

1. Code here
2. Result here

Answer 2

Generally the concern about duplication applies to content rather than navigation. Google will most likely detect that the text is within links and therefore part of the navigation rather than something which should be treated as "content".

Plenty of sites have a footer navigation bar or sitemap, and in some regards it can be good for SEO to have a very clear navigation path around your site (by having a sitemap in the footer like this).

Assuming each of those pages is legitimate and doesn't have duplicate content, I wouldn't be concerned.