Twitter bootstrap 不同的布局-不利于搜索引擎优化_Twitter Bootstrap_Twitter Bootstrap 3_Seo

Twitter bootstrap 不同的布局-不利于搜索引擎优化

twitter-bootstrap twitter-bootstrap-3 seo

Twitter bootstrap 不同的布局-不利于搜索引擎优化,twitter-bootstrap,twitter-bootstrap-3,seo,Twitter Bootstrap,Twitter Bootstrap 3,Seo,在我的网页底部，我有一个20个国家的列表（生成的列表每天都在变化）。根据显示类型，我将有4、3或2列。PHP脚本生成3种显示类型的输出我想这对SEO来说是非常糟糕的，重复从来都不是一个好主意（加载更多代码，等等）。我对bootstrap很陌生。有没有更好的办法 <div class="row"> <div class="visible-lg visible-md"> <div class="col-lg-3 col-md-3">

在我的网页底部，我有一个20个国家的列表（生成的列表每天都在变化）。根据显示类型，我将有4、3或2列。PHP脚本生成3种显示类型的输出

我想这对SEO来说是非常糟糕的，重复从来都不是一个好主意（加载更多代码，等等）。我对bootstrap很陌生。有没有更好的办法

<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>

通常，对复制的担忧适用于内容而不是导航。谷歌很可能会检测到文本在链接中，因此是导航的一部分，而不是应该被视为“内容”的内容

很多站点都有一个页脚导航栏或站点地图，在某些方面，在站点周围有一个非常清晰的导航路径（通过在页脚中有一个这样的站点地图）对SEO是有好处的

假设这些页面中的每一个都是合法的，并且没有重复的内容，我就不担心了。

如果你想避免seo问题，你可以这样解决你的问题：

<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>

代码

结果

代码

结果

如果你想让它响应迅速，搜索引擎优化友好，并保持字母顺序，我现在想的都是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();    
    });
});

var xs=''；
var sm=“”；
var md=''；
var设备=“”；
函数updateFlags（）{
如果（$（窗口）.width（）<768）{
if（device！='xs'）$（'.row'）.html（xs）；
设备='xs'；
}
如果（$（window.width（）>=768&&$（window.width（）<992）{
如果（设备！=“sm”）$（“.row”）.html（sm）；
设备='sm'；
}
如果（$（窗口）.width（）>=992）{
if（device！='md'）$（'.row'）.html（md）；
设备='md'；
}
}
$（文档）.ready（函数（）{
updateFlags（）；
$（窗口）。调整大小（函数（）{
updateFlags（）；
});
});

代码

结果

沃侯。不错。我想了想，但因为课堂使用太多，所以就把它打发掉了。唯一值得关注的是，在我的示例中，国家是按列排序的，而不是按行排序的（我认为，人类更容易阅读）。老实说，类对我来说并不是一个大问题，因为据我所知并不影响SEO。我更不喜欢的是代码中存在大量的div，但我删除了它们并更新了代码。我已经将类从div移动到anch，并删除了所有div。这些类在每个引导模板中都非常常见。或者你使用这个类，或者你将使用像width=“50%”（对于响应性设计是必需的）这样的百分比是一样的。但我还是觉得上课看起来更好。检查上面的代码，也许你更喜欢。当然，越小越好。但我仍然不知道如何按原始方式对列进行排序（按字母顺序排列列而不是按行）。在你的例子中，阿根廷被留给了澳大利亚，而不是在澳大利亚之上）。啊，现在我明白了。我会想办法解决这个问题。我已经再次更新了我的答案。这是我现在能做的最好的了。这个问题似乎离题了，因为它是关于SEOIt的，它既是关于引导的，也是关于SEO的

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();    
    });
});